<template>
    <el-form ref="seniorSetForm"
             id="seniorSetForm"
             :label-width="labelWidth">
        <el-form-item label="适用环境">
            <el-radio-group name="scene"
                            v-model="scene">
                <el-radio label="0">wap</el-radio>
                <el-radio label="1">pc</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="背景图">
            <input id="bjt"
                   name="backgroundImageFile"
                   type="file"/>
        </el-form-item>
        <el-form-item :label='flopFlag?"卡牌背图":"转盘样式"'
                      v-if="!doll && !redEnvelopesFlag && !eggtwistingFlag">
            <input type="file"
                   name="turntableStyleFile"/>
        </el-form-item>
        <el-form-item label="娃娃机背景图"
                      v-if="doll">
            <input type="file"
                   name="turntableStyleFile"/>
        </el-form-item>
        <el-form-item label="banner"
                      v-if="!doll">
            <input type="file"
                   name="sloganFile">
        </el-form-item>
        <el-form-item label="娃娃机边框"
                      v-if="doll">
            <input type="file"
                   name="sloganFile">
        </el-form-item>
        <template v-if="guessContentFlag">
            <el-form-item label="竞猜左侧图">
                <input type="file"
                       name="topic1File">
            </el-form-item>
            <el-form-item label="竞猜右侧图">
                <input type="file"
                       name="topic2File">
            </el-form-item>
        </template>
        <template v-if="redEnvelopesFlag">
            <el-form-item label="拆字图">
                <input type="file"
                       name="turntableStyleFile">
            </el-form-item>
            <el-form-item label="规则图">
                <input type="file"
                       name="redEnvelopesFile">
            </el-form-item>
            <el-form-item label="红包图">
                <input type="file"
                       name="redEnvelopes1File">
            </el-form-item>
            <el-form-item label="红包图底图">
                <input type="file"
                       name="redEnvelopes2File">
            </el-form-item>
            <el-form-item label="商品卡片图">
                <input type="file"
                       name="redEnvelopes3File">
            </el-form-item>
            <el-form-item label="红包外面图">
                <input type="file"
                       name="redEnvelopes4File">
            </el-form-item>
        </template>
        <template v-if="eggtwistingFlag">
            <el-form-item label="扭蛋机的外罩">
                <input type="file"
                       name="turntableStyleFile">
            </el-form-item>
            <el-form-item label="规则图">
                <input type="file"
                       name="redEnvelopesFile">
            </el-form-item>
            <el-form-item label="扭蛋机的底座">
                <input type="file"
                       name="redEnvelopes1File">
            </el-form-item>
            <el-form-item label="扭蛋的出口">
                <input type="file"
                       name="redEnvelopes2File">
            </el-form-item>
            <el-form-item label="点击抽奖">
                <input type="file"
                       name="redEnvelopes3File">
            </el-form-item>
            <el-form-item label="扭蛋机小球1">
                <input type="file"
                       name="redEnvelopes4File">
            </el-form-item>
            <el-form-item label="扭蛋机小球2">
                <input type="file"
                       name="eggTwisting1File">
            </el-form-item>
            <el-form-item label="扭蛋机小球3">
                <input type="file"
                       name="eggTwisting2File">
            </el-form-item>
            <el-form-item label="扭蛋机小球4">
                <input type="file"
                       name="eggTwisting3File">
            </el-form-item>
        </template>
        <el-form-item label="奖品图标"
                      v-if="!doll">
            <input type="file"
                   name="prizeIconFile"/>
        </el-form-item>
        <el-form-item label="返回俱乐部"
                      v-if="doll">
            <input name="linkUrl"/>
        </el-form-item>
        <el-form-item>
            <el-button class="pan-btn green-btn sm-btn"
                       size="small"
                       @click="saveSetHandle">保 存
            </el-button>
            <el-button type="danger"
                       class="pan-btn red-btn sm-btn"
                       size="small"
                       @click="deleteHandle">删 除
            </el-button>
        </el-form-item>
    </el-form>
</template>
<script>
    import request from '@/utils/request'

    export default {
        name: 'seniorSet',
        props: ['json'],
        data() {
            return {
                doll: false,
                scene: '0',
                labelWidth: '150px',
                flopFlag: false,
                guessContentFlag: false,
                redEnvelopesFlag: false,
                eggtwistingFlag: false
            }
        },
        mounted() {
            console.log(this.json);
            if (this.json.templateMark === 'prizeclaw') {
                this.doll = true
            }
            if (this.json.templateMark === 'flop') {
                this.flopFlag = truegit
            }
            if (this.json.templateMark === 'redenvelopes') {
                this.redEnvelopesFlag = !this.redEnvelopesFlag
            }
            if (this.json.templateMark === 'eggtwisting') {
                this.eggtwistingFlag = !this.eggtwistingFlag;
                console.log('eggtwistingFlag===>' + this.eggtwistingFlag);
            }
            this.$nextTick(function () {
                if (this.json.templateMark !== undefined) {
                    const templateType = this.json.templateMark.toLowerCase();
                    if (templateType === 'guess' || templateType === 'tournamentguess') {
                        this.guessContentFlag = !this.guessContentFlag
                    }
                }
            })
        },
        methods: {
            saveSetHandle() {
                const formData = new FormData(document.querySelector('#seniorSetForm'))
                formData.append('scene', this.scene);
                console.log(formData);
                const _this = this;
                request({
                    url: '/activityConsole/activity/activityInfoId/' + _this.json.activityId + '/advanced-setting',
                    method: 'post',
                    data: formData
                }).then(res => {
                    console.log(res);
                    _this.$message({
                        type: 'success',
                        message: res.description
                    })
                }).catch(err => {
                    console.log(err)
                })
            },
            deleteHandle() {
                const _this = this;
                const sceneStr = Number(this.scene) === 1 ? 'pc' : 'wap'
                request({
                    url: '/activityConsole/activity/activityInfoId/' + _this.json.activityId + '/advanced-setting/scene/' + sceneStr,
                    method: 'DELETE'
                }).then(res => {
                    console.log(res);
                    _this.$message({
                        type: 'success',
                        message: res.description
                    })
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
</script>
